import { customRef } from "vue";
export default function (initValue: string, delay: number) {
  //使用vue提供的customRef定义响应式数据，数据一变，页面不会立即更新，需要自己控制更新
  // let initValue = "您好";
  //track:追踪数据变化  trigger:数据变化后，手动控制页面更新--触发的意思
  let timer: number;
  let msg = customRef((track, trigger) => {
    return {
      //get何时被调用？--msg被读取时
      get() {
        track(); //追踪数据变化--告诉Vue："有人读取我了，记录一下"
        console.log("get"); // track() // 告诉Vue："有人读取我了，记录一下"
        return initValue;
      },
      //set何时被调用？--msg被修改时
      set(val) {
        console.log("set", val);
        clearTimeout(timer);
        timer = setTimeout(() => {
          initValue = val;
          //触发依赖-告诉vue，数据msg被修改了，请去更新视图,通知vue一下数据msg变化了
          trigger(); //触发依赖--告诉Vue："我变了，通知所有依赖我的地方更新"
        }, delay); //trigger() // 告诉Vue："我变了，通知所有依赖我的地方更新"
      },
    };
  });
  return { msg };
}
